<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8 lte_ie9"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8 lte_ie9"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8 lte_ie9"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8 lte_ie9"> <![endif]-->
<!--[if lte IE 9 ]> <html class="lte_ie9"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html><!--<![endif]-->
<head>
    <title>编辑社会关系</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/news/page.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script src="/js/ajaxupload.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" >
        var MYOA_JS_SERVER = "";
        var MYOA_STATIC_SERVER = "";
    </script>

    <style>

        body{
            font-size: 15px;
            font-family: 微软雅黑;
        }

        .TableBlock .TableData td, .TableBlock td.TableData {
            background: #FFFFFF;
            border-bottom: none;
            border-right: none;
            padding: 3px;
        }
        .big3{
            margin-left: 5px;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            margin-top: -3px;
            margin-right: 40px;
            font-size: 22px;
            color: #494d59;
            font-weight: inherit;
        }


        .btn_ .btn_style {
            background: url("../../img/save.png") no-repeat;
        }
        #rs {
            display: inline-block;
            float: left;
            width: 66px;
            height: 30px;
            text-align: center;
            margin-top: 10px;
            margin-bottom: 20px;
            padding-left: 23px;
            padding-top: 7px;
            cursor: pointer;
            font-size: 14px;
            background: url("../../img/publish.png") no-repeat;
            margin-left: 40%;
        }
        .TableData{
            font-size: 14px;
            color: #2a588c;
            /*   font-weight: bold;*/
        }
        .TableBlock tbody tr{
            height: 52px;
        }
        .TableBlock tbody tr td{
            border: 1px solid #c0c0c0;
        }
        .TableBlock{
            border: 1px #124164 solid;
        }


        .TableBlock tr td:first-of-type,table tr td:nth-child(3){
            text-align: right;
        }
        .div_1{
            margin-left: 20px;
        }
        .bar {
            height: 18px;
            background: green;
        }

    </style>
</head>


<script type="text/javascript">

</script>

<body class="bodycolor" topmargin="5">
<table border="0" width="100%" cellspacing="0" cellpadding="3" class="small">
    <tr>
        <td>
            <div class="div_1">
                <img src="/img/commonTheme/${sessionScope.InterfaceModel}/notify_new.png" align="absmiddle"><span class="big3">编辑社会关系</span>&nbsp;&nbsp;
            </div>
        </td>
    </tr>
</table>
<br>
<form enctype="multipart/form-data" action=""  method="post" id="form1" name="form1" onSubmit="return CheckForm();">
    <table class="TableBlock" width="80%" align="center">

        <tr>
            <td nowrap class="TableData">单位员工：</td>
            <td class="TableData">
                <input type="text" id="staffRole" name="staffRole" style="width: 158px;height:28px;" size="12" class="BigStatic" readonly value="">&nbsp;
                <a href="javascript:;" id="departAdd" class="departAdd" ><fmt:message code="global.lang.select" /></a>
            </td>
            <td nowrap class="TableData">成员姓名：</td>
            <td class="TableData">
                <input type="text" id="staffName" style="width: 158px;height:28px;" name="staffName" size="12" maxlength="10" class="BigInput" value=""/>
            </td>
        </tr>

        <tr>
            <td nowrap class="TableData">与本人关系：</td>
            <td class="TableData">
                <select name="relationship" id="relationship" style="background: white; width:170px;height: 28px;" title="">
       <%--             <option><fmt:message code="hr.th.PleaseSelect" /></option>
                    <option>姐妹</option>
                    <option>姐弟</option>
                    <option>母子</option>
                    <option>兄弟</option>
                    <option>父子</option>
                    <option>兄妹</option>
                    <option>其他</option>--%>
                </select>
            </td>

            <td nowrap class="TableData">出生日期：</td>
            <td class="TableData">
                <input type="text" id="birthDate" style="width: 158px;height:28px;" name="birthDate" size="12" maxlength="10" class="BigInput" value="" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
            </td>
        </tr>

        <tr>
            <td nowrap class="TableData">政治面貌：</td>
            <td class="TableData">
                <select name="politicalOutlook" id="politicalOutlook" style="background: white; width:170px;height: 28px;" title="">
              <%--      <option><fmt:message code="hr.th.PleaseSelect" /></option>
                    <option>群众</option>
                    <option>共青团员</option>
                    <option>中共党员</option>
                    <option>中共预备党员</option>
                    <option>民主党派</option>
                    <option>无党派人士</option>--%>
                </select>
            </td>
            <td nowrap class="TableData">职业：</td><%--备注--%>
            <td class="TableData">
                <input type="text" id="occupation" style="width: 158px;height:28px;" name="occupation" size="12" maxlength="10" class="BigInput" value=""/>
            </td>
        </tr>
        <tr>
            <td nowrap class="TableData">担任职务：</td>
            <td class="TableData">
                <input type="text" id="post" style="width: 158px;height:28px;" name="post" size="12" maxlength="10" class="BigInput" value=""/>
            </td>

            <td nowrap class="TableData">联系人电话(个人)：</td>
            <td class="TableData">
                <input type="text" id="phone" style="width: 158px;height:28px;" name="phone" size="13" maxlength="12" class="BigInput" value=""/>
            </td>
        </tr>


        <tr>
            <td nowrap class="TableData">联系人电话(家庭)：</td>
            <td class="TableData" colspan=3>
                <input type="text" id="telephone" style="width: 158px;height:28px;" name="telephone" size="13" maxlength="12" class="BigInput" value=""/>
            </td>
        </tr>
        <tr>
            <td nowrap class="TableData">联系人电话(单位)：</td>
            <td class="TableData" colspan=3>
                <input type="text" id="phoneCall" style="width: 158px;height:28px;" name="phoneCall" size="13" maxlength="12" class="BigInput" value=""/>
            </td>
        </tr>
        <tr>
            <td nowrap class="TableData">工作单位：</td>
            <td class="TableData" colspan=3>
                <textarea name="workCompany" id="workCompany" cols="84" rows="3" class="BigInput" value=""></textarea>
            </td>
        </tr>
        <tr>
            <td nowrap class="TableData">单位地址：</td>
            <td class="TableData" colspan=3>
                <textarea name="companyAddress" id="companyAddress" cols="84" rows="3" class="BigInput" value=""></textarea>
            </td>
        </tr>
        <tr>
            <td nowrap class="TableData">家庭地址：</td>
            <td class="TableData" colspan=3>
                <textarea name="homeAddress" id="homeAddress" cols="84" rows="3" class="BigInput" value=""></textarea>
            </td>
        </tr>

        <tr>
            <td nowrap class="TableData">备注：</td>
            <td class="TableData" colspan=3>
                <textarea name="remarks" id="remarks" cols="84" rows="3" class="BigInput" value=""></textarea>
            </td>
        </tr>
        <%--<tr>--%>
            <%--<td nowrap class="TableData">附件上传：</td>&lt;%&ndash;备注&ndash;%&gt;--%>
            <%--<td class="TableData" colspan=3>--%>
                <%--&lt;%&ndash;<textarea name="remark" id="remark" cols="84" rows="3" class="BigInput" value=""></textarea>&ndaqsh;%&gt;--%>
            <%--</td>--%>
        <%--</tr>--%>

        <tr>
            <td class="TableData" width="20%">
                附件文档：
            </td>
            <td width="90%" id="files_txt"  class="TableData" colspan=3>
            </td>
        </tr>
        <tr>

            <td nowrap class="TableData">附件上传：</td>

            <td class="TableData" colspan=3>
                <%--<div id="query_uploadArr" style="margin-bottom: 5px;"></div>--%>
                <div  style="float: left;margin-right: 10px;"><img style="margin-left: 9px;margin-top: 3px;" src="../img/mg11.png" alt=""/></div>
                <div style="float: left;">
                    <form id="uploadimgform" target="uploadiframe" action="../upload?module=hr"
                          enctype="multipart/form-data" method="post" style="position: relative">
                        <input type="file" name="file" multiple="multiple" id="uploadinputimg" class="w-icon5"
                               style="position: absolute;opacity: 0;width: 70px;z-index: -1;
                            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)">
                        <a id="uploadimg" style="font-size:16px; cursor: pointer;"><fmt:message code="notice.th.addfile"/></a>
                    </form>
                </div>
                <div id="progress" style="width: 200px;float: left;margin-left: 10px;margin-top: 2px;">
                    <div class="bar" style="width: 0%;"></div>
                </div>
                <div class="barText" style="float: left;margin-left: 10px;"></div>
            </td>
            <%-- <td width="20%" class="files" id="files_txt" colspan=2>
            </td>--%>
        </tr>

        <tr align="center" class="TableControl">
            <td colspan=4 nowrap>
                <div id="rs" type="save" class="btn_style btn_ok"><fmt:message code="global.lang.save" /></div><%--保存--%>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    var type = $.GetRequest().type;
    var userId= $.GetRequest().userId;

    var user_id;
    var depart_id;
    //时间控件调用
    var start = {
        format: 'YYYY-MM-DD',
        /* min: laydate.now(), //设定最小日期为当前日期*/
        /* max: '2099-06-16 23:59:59', //最大日期*/
        istime: true,
        istoday: false,
        choose: function(datas){
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var typeHr=getQueryString('typeHr');

    $(function () {
        $.ajax({  //填充与本人关系属性拉框
            type:'get',
            url:'/hr/manage/getHrCode',
            dataType:'json',
            data:{type:'relationship'},
            success:function(res){
                if(res.flag) {
                    var lists = res.object;
                    var render = [];
                    render.push("<option value=''><fmt:message code='hr.th.PleaseSelect' /></option>")
                    for(var i=0;i<lists.length;i++){
                        render.push("<option value=\""+lists[i].codeNo+"\">"+lists[i].codeName+"</option>");
                    }
                    $("#relationship").html(render.join(""));
                }

            }
        })
        $.ajax({  //填充政治面貌属性拉框
            type:'get',
            url:'/hr/manage/getHrCode',
            dataType:'json',
            data:{type:'politicalOutlook'},
            success:function(res){
                if(res.flag) {
                    var lists = res.object;
                    var render = [];
                    render.push("<option value=''><fmt:message code='hr.th.PleaseSelect' /></option>")
                    for(var i=0;i<lists.length;i++){
                        render.push("<option value=\""+lists[i].codeNo+"\">"+lists[i].codeName+"</option>");
                    }
                    $("#politicalOutlook").html(render.join(""));
                }

            }
        })
    })

    var end = {
        format: 'YYYY-MM-DD',
        /*min: laydate.now(),*/
        /*max: '2099-06-16 23:59:59',*/
        istime: true,
        istoday: false,
        choose: function(datas){
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };

    function selectNumber(name,val){
        var numbers = $("select[name="+name+"]").find("option"); //获取select下拉框的所有值

        for (var j = 1; j < numbers.length; j++) {
            if ($(numbers[j]).val() == val) {
                $(numbers[j]).attr("selected", "selected");
            }
        }
    }

    fileuploadFn('#uploadinputimg',$('#files_txt'));

    $('#uploadimg').click(function(){
        me =this;
        $('#form1').attr('action','../../upload?module=hr')
        $('#uploadinputimg').click()
    })


    $(function () {
        var id=$.getQueryString('id');
        if(id){
            $.ajax({
                url: "<%=basePath%>/hr/manage/getSocialRelationsById",
                type: "get",
                data: {
                    'socialRelId': id
                },
                dataType: 'json',
                success: function (obj) {
                    var data=obj.data;

                    var arr = data.attachmentList;
                    var str1=""
                    if (data.attachmentList != '') {
                        for (var i = 0; i < (arr.length); i++) {
                            str1+='<div class="dech" deUrl="'+encodeURI(arr[i].attUrl)+'" style="display:block;"><a class="ATTACH_a" NAME="'+arr[i].attachName+'*" href="<%=basePath %>download?'+encodeURI(arr[i].attUrl)+'">'+arr[i].attachName+'</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="../img/file/icon_deletecha_03.png"/><input type="hidden" class="inHidden" value="'+arr[i].aid+'@'+arr[i].ym+'_'+arr[i].attachId+',"></div>';
                        }
                        $('#files_txt').append(str1);
                    };

                    $('#staffRole').attr('user_id',data.staffRole);
                    $('#staffRole').val(data.userName);
                    $('#staffName').val(data.staffName);
                    $('#birthDate').val(data.birthDate);
                 /*   selectNumber('relationship',data.relationship)
                    selectNumber('politicalOutlook',data.politicalOutlook)*/
                    $('#relationship').val(data.relationship);
                    $('#politicalOutlook').val(data.politicalOutlook);
                    $('#occupation').val(data.occupation);
                    $('#post').val(data.post);
                    $('#phone').val(data.phone);
                    $('#telephone').val(data.telephone);
                    $('#phoneCall').val(data.phoneCall);
                    $('#workCompany').val(data.workCompany);
                    $('#companyAddress').val(data.companyAddress);
                    $('#homeAddress').val(data.homeAddress);
                    var str = "";
                    if(data.attachmentList.length>0) {
                        for(var i = 0; i < data.attachmentList.length; i ++) {
                            str += data.attachmentList[i].attachName+",";
                        }
                        var str1 = str.substring(0, str.length-1);
                    }
                    $('.files_txt').html(str1);
                    $('#remarks').val(data.remarks);




                }
            });

            $('#rs').attr('type','edit')
        }


        //选择部门
        $('#departAdd').click(function(){
            user_id="staffRole";
            $.popWindow("../../common/selectUser?0");
        })


        function CheckForm(){
            if($('#planNo').val()==''){
                layer.msg('<fmt:message  code="event.th.PlanNull"/>',{icon:2});
                return false;
            }
            if($('#planName').val()==''){
                layer.msg('<fmt:message  code="event.th.PlanEmpty"/>',{icon:2});
                return false;
            }
            if($('#assessingOfficer').val()==''){ //审批人不能为空
                layer.msg('<fmt:message  code="withdraw.th.shenpi"/>',{icon:2});
                return false;
            }
            return true;
        }

        $('#query_uploadArr').on('click','.deImgs',function(){
            var data=$(this).parents('.dech').attr('deUrl');
            var dome=$(this).parents('.dech');
            deleteChatment(data,dome);
        })

        //附件删除
        $('#files_txt').on('click','.deImgs',function(){
            var data=$(this).parents('.dech').attr('deUrl');
            var dome=$(this).parents('.dech');
            deleteChatment(data,dome);
        })

        //删除附件
        function deleteChatment(data,element){

            layer.confirm('<fmt:message code="menuSSetting.th.isdeleteMenu" />？', {/*确定要删除吗*/
                btn: ['<fmt:message code="global.lang.ok" />','<fmt:message code="depatement.th.quxiao" />'], //按钮 /* 确定  取消*/
                title:'<fmt:message code="notice.th.DeleteAttachment" />'/*删除附件*/
            }, function(){
                //确定删除，调接口
                $.ajax({
                    type:'get',
                    url:'/delete',
                    dataType:'json',
                    data:data,
                    success:function(res){

                        if(res.flag == true){
                            layer.msg('<fmt:message code="workflow.th.delsucess" />', { icon:6});/*删除成功*/
                            element.remove();
                        }else{
                            layer.msg('<fmt:message code="lang.th.deleSucess" />', { icon:6});/*删除失败*/
                        }
                    }
                });

            }, function(){
                layer.closeAll();
            });
        }

        // 提交表单
        $("#rs").click(function(){
            $('#form1').attr('action','')
            var fileId=''
            var fileName=''
            if(CheckForm())
            {
                for(var i=0;i<$('.inHidden').length;i++){
                    fileId += $('.inHidden').eq(i).val();
                    fileName += $('#files_txt a').eq(i).attr('NAME');
                }



                var data = {

                staffRole: $('#staffRole').attr('user_id'),
                staffName: $('#staffName').val(),
                relationship: $('#relationship').val(),
                birthDate: $('#birthDate').val(),
                    politicalOutlook: $('#politicalOutlook').val(),
                occupation: $('#occupation').val(),
                post: $('#post').val(),
                phone: $('#phone').val(),
                telephone: $('#telephone').val(),
                phoneCall: $('#phoneCall').val(),
                workCompany: $('#workCompany').val(),
                companyAddress: $('#companyAddress').val(),
                homeAddress: $('#homeAddress').val(),
                attachmentId:fileId,
                attachmentName:fileName,
                remarks: $('#remarks').val()
                }

                    data.socialRelId = id
                    $.ajax({
                        type: 'post',
                        url: '<%=basePath%>/hr/manage/updateSocialRelations',
                        dataType: 'json',
                        data: data,
                        success: function (res) {
                            if(res.flag) {
                                layer.msg('修改成功', {icon: 1},function () {
                                    if(typeHr == '1'){
                                        window.close();
                                        window.opener.guanxiData();
                                    }else {
                                        if(type!=undefined){
                                            window.location.href='/hr/manage/socialRelationsManaer?type=1&userId='+userId
                                        }else{
                                            parent.location.href = '<%=basePath%>/hr/manage/staff_relatives';
                                        }

                                    }
                                });
                                /*添加成功*/

                            }else {
                                $.layerMsg({content:'修改失败！', icon: 2});
                            }

                        }
                    })


            }
        });

    });
    //获取url参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r[2];
        return '';
    }
</script>
</body>
</html>

